<template>
    <div class="star_warp" :class="starSize">
      <span class="starItem" v-for="(item,index) in classArr" :class="item" :key="index"></span>
    </div>
</template>

<script>
    export default {
      name: "star",
      created(){

      },
      mounted(){

      },
      props:{
        size:{
          type:Number
        },
        score:{
          type:Number
        },
        max:{
          type:Number,
          default() {
            return 5;
          }
        },
      },
      data () {
        return {

        }
      },
      methods:{

      },
      computed:{
        classArr(){
          let res = [];
          let score = Math.round(this.score*2)/2
          let on = Math.floor(score);
          let half = score%1;
          let max = this.max;
          for(let i = 1 ;i<=on;i++){
            max--;
            res.push("on")
          }
          if(half){
            max--;
            res.push("half")
          }
          for(let i = 1 ;i<=max;i++){
            res.push("off")
          }
          return res;
        },
        starSize(){
          return "star"+this.size;
        }
      },
      watch:{

      }
    }
</script>

<style lang="stylus" rel="stylesheet/styleus">
  @import "../../common/stylus/mixin";
  .star_warp
    display inline-block
    &.star48
      .starItem
        display inline-block
        height 20px
        width 20px
        margin-right 22px
        &:last-child
          margin-right 0px
        &.half
          bg-img("star48_half");
          background-repeat no-repeat
          background-size 20px
        &.off
          bg-img("star48_off");
          background-repeat no-repeat
          background-size 20px
        &.on
          bg-img("star48_on");
          background-repeat no-repeat
          background-size 20px
    &.star36
      .starItem
        display inline-block
        height 15px
        width 15px
        margin-right 6px
        &:last-child
          margin-right 0px
        &.half
          bg-img("star36_half");
          background-repeat no-repeat
          background-size 15px
        &.off
          bg-img("star36_off");
          background-repeat no-repeat
          background-size 15px
        &.on
          bg-img("star36_on");
          background-repeat no-repeat
          background-size 15px
    &.star24
      .starItem
        display inline-block
        height 10px
        width 10px
        margin-right 3px
        &:last-child
          margin-right 0px
        &.half
          bg-img("star48_half");
          background-repeat no-repeat
          background-size 10px
        &.off
          bg-img("star48_off");
          background-repeat no-repeat
          background-size 10px
        &.on
          bg-img("star48_on");
          background-repeat no-repeat
          background-size 10px



</style>
